<template>
  <div>
    <div class="leftNav" v-for="item in liftNavList" :key="item.id">
      <div class="navTitle">{{ item.name }}</div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
      >
        <!-- 一级菜单 -->
        <el-menu-item
          v-for="item1 in item.children"
          :index="item1.path"
          :key="item1.id"
        >
          <template slot="title">
            <span> · {{ item1.name }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  props: ['url'],
  data() {
    return {
      liftNavList: []
    }
  },
  methods: {
    async getLiftNavList() {
      const { data: res } = await this.$http.post('/liftNavList', {
        params: this.url
      })
      if (res.status !== 200) {
        return
      }
      this.liftNavList = res.data
      console.log(res)
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  },
  created() {
    this.getLiftNavList()
  }
}
</script>
<style lang="less" scoped>
.el-aside {
  height: 100%;
}
.navTitle {
  padding-left: 30px;
  height: 66px;
  line-height: 66px;
  color: #999999;
}
.leftNav {
  border-right: solid 1px #e6e6e6;
}
.el-menu {
  border-right: none;
}
</style>
